<template>
	<div class="layout-padding fillings-container" v-loading="loading">
		<HyTable
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			:searchFields="searchFields"
			:searchDefault="searchDefault"
			:searchConfig="searchConfig"
			ref="hyTableRef"
			:buttonConfig="{
				span: 4,
				offset: 1,
			}"
		>
			<template #tableHeader>
				<el-button plain icon="download" @click="handleExport">导出</el-button>
			</template>
			<template #stateSlot="{ row, column }">
				<!-- <el-tag type="primary" v-if="row.country_approve_status == 2">{{ formatStatus(row.country_approve_status) }}</el-tag>
				<el-tag type="danger" v-else-if="row.country_approve_status == 4">{{ formatStatus(row.country_approve_status) }}</el-tag>
				<el-tag type="success" v-else-if="row.country_approve_status == 3">{{ formatStatus(row.country_approve_status) }}</el-tag>
				<el-tag type="danger" v-else>{{ formatStatus(row.country_approve_status) }}</el-tag> -->
				<el-tag :class="setColor(row.country_approve_status)">{{ formatStatus(row.country_approve_status) }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="80">
					<template #default="{ row }">
						<el-button text type="primary" icon="View" @click="showDetails(row, '查看')">查看</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed,toRaw } from 'vue';
import { useRouter } from 'vue-router';
import HyTable from '/@/components/HyTable/components/TableLayout/default.vue';
import { getCountyDeclareList,exportExcel,isExsitById } from '/@/api/areaDigital';
import { useDict } from '/@/hooks/dict';
import { handleBlobFile } from '/@/utils/other';
import {ElMessage} from "element-plus";

export default defineComponent({
	name: 'index',
	components: { HyTable },
	setup() {
		const { country_approve_status: AREA_STATUS } = useDict('country_approve_status');
		const router = useRouter();
		const loading = ref(false)
		const hyTableRef = ref()
		const searchDefault = ref({
			selectType: 4,
		});
		const tableColumns = computed(() => {
			return [
				{ prop: 'app_code', label: '数字化应用编号' },
				{ prop: 'app_name', label: '数字化应用名称' },
				{ prop: 'county_name_name', label: '区县名称' },
				{ prop: 'county_responsible_dept_name', label: '区县责任部门' },
				{ prop: 'county_lead_dept_name', label: '市级牵头部门' },
				{ prop: 'create_time', label: '提交时间' },
				{
					prop: 'country_approve_status_name',
					label: '状态',
					slot: 'stateSlot',
					fixed: 'right',
					width: 160
				},

			];
		});
		const tableConfig = computed(() => {
			return {
				request: getCountyDeclareList,
				showSearch: true,
				isCostomTop: false,
				title: '数字化应用备案台账',
				defaultData: [],
			};
		});
		const searchConfig = computed(() => {
			return {
				labelWidth: '120px',
				span: 6,
				offset: 0,
				type: 'search',
				title: '数字化应用备案台账',
				show: true,
			};
		});
		// 配置搜索
		const searchFields = computed(() => {
			return {
				countyNameName: {
					type: 'input',
					label: '区县名称',
					span: 8,
					placeholder: '请输入区县名称',
				},
				timeArr: {
					type: 'date',
					span: 8,
					picker: 'datetimerange',
					label: '提交时间',
				},
			};
		});

		async function showDetails(row, type) {
			const result = await checkData(row.declare_id,type=='撤回'?1:'')
			if(result){
				console.log(row, type);
				switch (type) {
					case '查看':
						router.push({
							name: '查看',
							query: {
								id: row.declare_id,
								processInstanceId: row.process_instance_id,
								nodeId: row.node_id,
								taskId: row.task_id,
								approveStatus:row.approve_status,
								pageType: 4,
								title: '数字化应用备案详情',
							},
						});
						break;
				}
			}
		}
    type checkParams = {
      declareId:string,
      checkFlag?:number|string
    }
		function checkData(declareId:string,flag?:number|string){ //判断数据是否存在
			if(!loading.value){
				loading.value = true
			}
      let params:checkParams = {declareId:declareId}
      if(flag){
        params['checkFlag'] = flag
      }
      return new Promise(resolve => {
        isExsitById(params).then(res=>{
          if(res.ok){
            if(res.data){
              resolve(true)
            }else{
              loading.value = false
							ElMessage.error('该数据已被删除');
							hyTableRef.value.getTableData();
            }
          }else{
            loading.value = false
            ElMessage.error(res.msg);
            resolve(false)
          }
        })

      })
    }
		function formatStatus(val) {
			const rowArr = AREA_STATUS.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
		}
		function handleExport(){
			let params = hyTableRef.value.getSearchData()
			params['beginTime'] = params['timeArr']?params['timeArr'][0]:undefined
			params['endTime'] = params['timeArr']?params['timeArr'][1]:undefined
			delete params.timeArr
			console.log(params)
			loading.value = true
			exportExcel(params).then(res=>{
				loading.value = false
				handleBlobFile(res,'数字化应用备案台账.xlsx')
			}).catch(()=>{
				loading.value = false
			})
		}
		//设置颜色
		function setColor(type: string){
			switch (type) {
				case '1':
					return 'start-tag'; //待申报
				case '2':
					return 'wait-tag'; //申报中
				case '4':
					return 'refuse-tag'; //未通过
				case '3':
					return 'agree-tag'; //已通过
				default:
					break;
			}
		}
		return {
			hyTableRef,
			loading,
			tableColumns,
			tableConfig,
			searchFields,
			searchDefault,
			searchConfig,
			showDetails,
			formatStatus,
			handleExport,
			setColor
		};
	},
});
</script>

<style scoped lang="scss">
.fillings-container {
	height: auto;
}
</style>
